<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css图片3d翻转</title>
    <link rel="stylesheet" href="css3图片3d翻转.css">
</head>

<body>
    <div class="wrapper">
        <ul>
            <li class="out-top">
                <div class="picbox">
                    <div class="show"><img src="../../image/spongebob(1).jfif" alt=""></div>
                    <div class="hide">
                        <h3>SpongeBob</h3>
                    </div>
                </div>
            </li>
            <li class="out-bottom">
                <div class="picbox">
                    <div class="show"><img src="../../image/spongebob(8).jfif" alt=""></div>
                    <div class="hide">
                        <h3>SpongeBob</h3>
                    </div>
                </div>
            </li>
            <li class="out-left">
                <div class="picbox">
                    <div class="show"><img src="../../image/spongebob(3).jfif" alt=""></div>
                    <div class="hide">
                        <h3>SpongeBob</h3>
                    </div>
                </div>
            </li>
            <li class="out-right">
                <div class="picbox">
                    <div class="show"><img src="../../image/spongebob(10).jfif" alt=""></div>
                    <div class="hide">
                        <h3>SpongeBob</h3>
                    </div>
                </div>
            </li>
            <li>
                <div class="picbox">
                    <div class="show"><img src="../../image/spongebob(5).jfif" alt=""></div>
                    <div class="hide">
                        <h3>SpongeBob</h3>
                    </div>
                </div>
            </li>
            <li>
                <div class="picbox">
                    <div class="show"><img src="../../image/spongebob(6).jfif" alt=""></div>
                    <div class="hide">
                        <h3>SpongeBob</h3>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script src="css3图片3d翻转.js"></script>
</body>

</html>